<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>
<body>

    
    
</body>
</html>
<script>
    //基本用法
    //对象的使用
    // let info = {name:"后盾人",url:"houdunren.com"};
    // let {name:m,url:n} = info;
    // console.log(m,n);

    //如果属性名和变量相同的话可以省略属性定义
    // let {name,url} = {name:'后盾人',url:'houdunren.com'};
    // console.log(name)

    //函数返回值直接结构到变量
    // function hd(){
    //     return {
    //         name : '后盾人',
    //         url : 'houdunren.com'
    //     };
    // }
    // let {name,url} = hd();
    // console.log(url)

    //严格模式
    // "use strict";
    //  let {name,url} = {name:"后对人",url:'houdunrencko'};
    // console.log(name,url)

    //所以最终的结果还是使用let等赋值声明
    

    //简介定义
    //如果属性名与赋值的变量名相同就更加简洁
    // let web = {name:"后盾人",url:"houdunren.com"};
    // let {name,url} = web;
    // console.log(name)

    //只赋值部分变量
    // let [,url] = ['后盾人','houdunren.com'];
    // console.log(url)
    //前面是属性的名称  后面是变量
    // let {name} = {name:'后盾人',url:'houdunren.com'};
    // console.log(name)


    //可以直接使用变量赋值对象属性
    // let name = "后盾人",url="houdunren.com";
    // //标准写法如下
    // let hd = {name:name,url:url};
    // console.log(hd)
    
    // //如果属性和值变量同名 可以写成下面的简写形式
    // let opt = {name,url};
    // console.log(opt)





    //嵌套解构
    // const hd = {
    //     name : '后盾人',
    //     lessons:{
    //         title:'JS'
    //     }
    // };
    // const {name,lessons:{title}} = hd;
    // console.log(title)

    //默认值
    //为变量设置默认值

    // let [name,site='hdcms'] = ['后盾人'];
    // console.log(name)

    // let {name,url,user='向军大叔'} = {name:'后盾人',url:'houdunren.com'};
    // console.log(name,user);

    //使用默认值特性可以方便的对参数进行预设
    //给变量设置默认值   这里使用展开的形式对变量进行赋值  并且使用了默认值   如果设置了  就按照设置的走  如果没有设置   就按照默认的走
    // function createElement(options={}) {
    //     //给变量设置默认值
    //     let {width='200px',height='100px',backgroundColor='red'} = options;
    //     const h2 = document.createElement('h2');
    //     h2.style.width = width;
    //     h2.style.height = height;
    //     h2.style.backgroundColor = backgroundColor;
    //     document.body.appendChild(h2);
    // }
    //
    // createElement({width:'500px',height:'500px',backgroundColor:'#f0932b'});

    //函数参数
    //数组参数的使用
    // function hd([a,b]){
    //     console.log(a,b)
    // }
    // hd(['后盾人','hdcms']);

    //对象参数的使用方法
    // function hd({name,url,user='向军大叔'}){
    //     console.log(name,url,user)
    // }
    // hd({name:'后盾人',url:"houdunren,mcon",user:"向军"});


    //对象解构传参
    function user(name,{sex,age} = {}) {
        console.log(name,sex,age)
    }
    user("向军大叔",{sex:"男",age:18});







</script>